<template>
  <view class="content">
    <canvas
      id="canvas"
      type="2d"
      class="canvas-table"
      width="350"
      height="500"
    />
  </view>
</template>

<script setup lang="ts">
  import { onShow, ref } from '@dcloudio/uni-app'
  import { getCurrentInstance } from 'vue'
  import { defineColumn } from '../canvas-table/table-helper'
  import { CanvasTable } from '../canvas-table'
  import ITableOptions from '../canvas-table/types/ITableOptions'

  const table = ref<any>()

  const columns = [
    defineColumn('id', 'ID', 80),
    defineColumn('warehouseName', '仓库', 80),
    defineColumn('customerName', '货主', 80, {
      type: 'link',
      fixed: 'left',
      left: 80,
      sortable: true,
      align: 'left',
      color: '#000',
    }),
    defineColumn('sendNum', '发件量', 80),
    defineColumn('claimNum', '理赔工单合计', 200),
    defineColumn('cfmClaimNum', '内部确认理赔工单', 120),
    defineColumn('finalClaimNum', '最终理赔工单', 200),
    defineColumn('claimRate', '理赔工单率', 200),
    defineColumn('singleClaimMoney', '单票理赔金额', 200),
    defineColumn('claimMoney', '理赔总金额', 200),
  ]

  onShow(() => {
    const instance = getCurrentInstance()
    const query = uni.createSelectorQuery().in(instance)
    query
      .select('#canvas')
      .fields({ node: true, context: true, size: true }, (res) => {
        const nodeInfo = Array.isArray(res) ? res[0] : res
        const { node, width, height } = nodeInfo
        if (!node) return
        const ctx = node.getContext('2d')
        console.log('ctx :>> ', ctx)
        const dpr = uni.getSystemInfoSync().pixelRatio
        node.width = (width || 0) * dpr
        node.height = (height || 0) * dpr
        table.value = new CanvasTable(ctx, [], columns, {
          background: '#28263f',
          headerColor: '#a1a1a1',
          rowColor: '#a1a1a1',
          border: 'none',
        } as ITableOptions)
      })
      .exec()
  })
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }

  .canvas-table {
    display: block;
    width: 100%;
    height: 500px;
  }
</style>
